<template>
    <div id="toast">
        <div   :class="{'tooltip':select== pushid}" v-if="select == pushid ? pushid : 0 ">
            <h1>是否删除该课程?</h1>
            <span id="sure" @click="sureShanchu"  class="yes">确定</span>
            <span id="del" @click='quxiaoShanchu'  class="no">取消</span>
        </div>
        <div :class="{'tooltip':select == 'exitself'}" v-if="select == 'exitself'">
            <h1>您已有该课程,</br>是否重复添加?</h1>
            <span  @click="plus()" class="yes">确定</span>
            <span @click="hide()" class="no">取消</span>
        </div>
        <div :class="{'tooltip':select== 'exitplane'}" v-if="select == 'exitplane'" id="tooltip-c" >
            <h1>您计划中已有该课程,</br>是否重复添加?</h1>
            <span  @click="plus()" class="yes">确定</span>
            <span @click="hide()" class="no">取消</span>
        </div>
        <div :class="{'tooltip':select== 'nouserinfo'}" v-if="select == 'nouserinfo'" id="userinfo">
            <h1>您当前未填写个人信息</br>是否填写信息?</h1>
            <span  @click="write()" class="yes">确定</span>
            <span @click="hide()" class="no">取消</span>
        </div>
        <div :class="{'tooltip':select == 'delplan'}" v-if="select == 'delplan'">
            <h1>是否删除计划?</h1>
            <span  @click="deletes" class="yes">确定</span>
            <span @click="hide" class="no">取消</span>
        </div>
        <div :class="{'tooltip':select == 'replane'}" v-if="select == 'replane'">
            <h1>是否替换计划?</h1>
            <span  @click="plus()" class="yes">确定</span>
            <span @click="hide()" class="no">取消</span>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['pushid', 'select'],
        data() {
            return {
                // select: null,
            }
        },
        methods: {
            sureShanchu() {
                this.$emit('sureShanchu');
            },
            quxiaoShanchu() {
                this.$emit('quxiaoShanchu');
            },
            plus() {
                this.$emit('plus');
            },
            hide() {
                this.$emit('hide');
            },
            deletes() {
                this.$emit('deletes');
            },
            write() {
                // 进行跳转
                this.$router.push('/user/gender');
                this.$emit('write');
            }
        }

    }
</script>
<style>
    #toast {
        .tooltip {
            display: block;
            background-color: #161616;
            border: 1px solid rgba(253, 184, 17, 1);
            padding: 20px 20px 20px 20px;
            color: #fdb803;
            width: 50%;
            text-align: center;
            position: fixed;
            z-index: 1005;
            bottom: 42%;
            left: 50%;
            -webkit-transform: translate(-50%);
            z-index: 1005;
            font-size: 16px;
            h1 {
                border-bottom: 1px solid rgba(253, 184, 17, .6);
                font-weight: 500;
                padding-bottom: 5px;
                box-sizing: border-box;
            }
            span {
                display: block;
                margin-top: 15px;
                width: 38%;
                float: left;
                font-size: 16px;
            }
            .yes {
                background-color: rgba(253, 184, 17, 1);
                border: 1px solid rgba(253, 184, 17, 1);
                color: #161616;
                float: left;
            }
            .no {
                border: 1px solid rgba(253, 184, 17, 1);
                float: right;
            }
        }
    }
</style>